<template>
    <div style="width:100%;height:100%;overflow:hidden">
        <div id="map">
           <el-button size="small" type="primary" id="shoow" @click="show()"> 显示卫片</el-button>
            <el-button size="small" type="primary" id="hidd" @click="hidde()">隐藏卫片</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
         map:null
        }
    },
    mounted(){
     this.init()
    },
    methods:{
      init(){
           this.smartmapx.mapbase = 'http://www.smartmapx.com';
            this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
            this.map=new this.smartmapx.Map({
                container: 'map',
                mapId: 'map_id_1',
                center: [116.39738, 39.90579],
                zoom: 9
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
                maxWidth: 100,
                unit: 'm'
            }));
      },
      show () {
          if(!this.map.getLayer('google')){
                this.map.addSource('google', {
                "type": "raster",
                "tiles": ["https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}"],
                "tileSize": 256
            });
            this.map.addLayer({
                "id": "google",
                "type": "raster",
                "source": "google"
            });
          }
      },
      hidde(){
        if(this.map.getLayer('google')){
            this.map.removeSource('google');
            this.map.removeLayer('google')
          }
      }
    }
}
</script>
<style scoped>
#map{
    height: 100%;
    width:100%;
}
#shoow{
    position: absolute;
    top: 30px;
    left:20px;
    z-index:30
}
#hidd{
     position: absolute;
     z-index: 30;
    top: 30px;
    left:120px;
}
</style>